<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <title>快聊聊天室</title>
</head>

<body>
    <div style="
        width: 40vw;
        height:80vh
        ;border:1px solid #999;
        position: absolute;
        top: 10vh;
        left: 30vw;
        display: flex;
        overflow:hidden;">
        <div style="width: 85%;border-left:1px solid #999;">
            <div id='dataListBox' style="width: 100%;height:70%;border-bottom: 1px solid #999;overflow-y: auto;padding:10px;">
                <div id='dataList'></div>
            </div>
            <div
                style="width: 100%;height:30%;border-bottom: 1px solid #999;overflow-y: auto;position: relative;">
                <textarea class="form-control" id='textareaText' style="height: 78%;padding:10px;border:0px solid #fff;"
                    aria-label="With textarea"></textarea>
                <button type="button" id='start' class="btn btn-primary"
                    style="position: absolute;right:10px;padding:5px 30px;margin-top: 2px;">发送</button>
            </div>
        </div>
        <div style="width: 15%;border-left:1px solid #999;" id='rightNaMeList'>

        </div>
    </div>


    <script>
        function keydownFun(key) {
            if (key === 13) {
                sendMessage();
            }
        }
        $("#textareaText").keydown(function (event) {
            keydownFun(event.which)
        })
        function disp_prompt() {
            var name = prompt("请输入您的名字", "奥特曼")
            if (name != null && name != "") {
                ws.send(`${name}-加入了聊天室`);
            }
        }
        // 114.115.168.47:10087
        var ws = new WebSocket("ws://127.0.0.1:10087");
        ws.onopen = function (e) {
            disp_prompt()
        }
        function sendMessage() {
            ws.send($("#textareaText").val());
            $("#textareaText").val('');
        }
        function getDates(){
            return new Date().getDate()
        }
        ws.onmessage = function (messageObj) {
            console.log(messageObj)
            messageObjs = JSON.parse(messageObj.data)
            console.log(messageObjs)
            let jqDom = `
                <div style="display: flex;">
                    <div class="alert alert-${messageObjs.isMy ? 'primary' : 'warning'}" style="flex:0.85;" role="alert">
                        ${messageObjs.msg}
                    </div>
                    <div style="flex:0.15;text-align: center;padding-top:5px;">
                        ${messageObjs.name}
                        <p style='font-size:10px;'>4/78 16:12</p>
                    </div>
                </div>
            `
            console.log(jqDom)
            $('#dataList').append(jqDom);
            $('#dataListBox').scrollTop(99999999999)
            // rightNaMeList
            let clientsNameList = messageObjs.clientsNameList;
            $('#rightNaMeList').html('');
            clientsNameList.map(item=>{
                $('#rightNaMeList').append(`<div style='padding:5px;text-align:center;'>${item}</div>`);
            })


        }
        $(start).on('click', function () {
            sendMessage()
        })
    </script>
</body>

</html>